<template>
	<view class="container">
		<view class="near-top">
			<view class="input-box flex f-align">
				<input
					style="width: 90%"
					@confirm="getDataList()"
					class="font28"
					:confirm-hold="false"
					confirm-type="search"
					type="text"
					v-model="searchInput"
					placeholder="请输入地址搜索"
					placeholder-class="placeholder"
				/>
				<image
					src="../static/img/search.png"
					class="mr10"
					style="width: 32rpx; height: 32rpx"
					@click="getDataList()"
				></image>
			</view>
			<view class="flex f-align f-justifyB" style="margin-top: 40rpx">
				<text class="font30" style="width: 500rpx">{{ locationText }}</text>
				<view class="flex f-align" @click="location()">
					<image
						src="../static/img/shouyudibiao@2x.png"
						class="mr10"
						style="width: 32rpx; height: 32rpx"
					>
					</image>
					<text class="font30 gray999">重新定位</text>
				</view>
			</view>
		</view>
		<view class="near-bottom" v-if="isfetch">
			<view class="flex f-column" v-if="dataList.length > 0">
				<view
					v-for="(item, index) in dataList"
					:key="index"
					class="flex f-align f-justifyB item-box mb20"
					@click="cabinetClick(item)"
				>
					<text class="font30" style="width: 410rpx"
						>{{ item.address || '-'
						}}{{ item.count ? '(' + item.count + '个)' : '' }}</text
					>
					<view class="flex f-align" v-if="item.distance">
						<text class="font30 gray999 mr10">{{ toText(item.distance) }}</text>
						<image
							src="../static/img/navigation.png"
							style="width: 48rpx; height: 48rpx"
							@click.stop="goHandle(item)"
						></image>
					</view>
				</view>
			</view>
			<view v-else class="f-center font36 bold" style="height: 300rpx">
				暂无数据
			</view>
		</view>
	</view>
</template>

<script>
import { key } from '../utils/API.js'
export default {
	data() {
		return {
			searchInput: '',
			dataList: [],
			middleList: [],
			noLnglatList: [],
			isfetch: false,
			isLocation: false,
			lnglat: '',
			goodsId: '',
			locationText: ''
		}
	},
	onLoad(option) {
		let _this = this
		if (option.goodsId) {
			this.goodsId = option.goodsId
		}
		this.location()
	},
	computed: {
		btnShow() {
			if (this.searchInput) {
				return true
			} else {
				return false
			}
		}
	},
	methods: {
		location() {
			let _this = this
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					_this.isLocation = true
					_this.lnglat = res.latitude + ',' + res.longitude
					getApp().globalData.latitude = res.latitude
					getApp().globalData.longitude = res.longitude
					_this.getLocationText()
				},
				fail: (err) => {
					this.$api.msg('操作频繁，请稍后再试')
					_this.isLocation = false
					_this.locationText = '请开启定位'
				},
				complete: () => {
					_this.getDataList()
				}
			})
		},
		cabinetClick(item) {
			// if (!this.goodsId) {
			// this.$api.toPage('./goodsList?gzbh=' + item.gzbh + '&type=1')
			// }
			if (item.cabinet05 == item.cabinet06 && item.cabinet06 == '0') {
				this.$api.msg('暂停使用')
				return
			}
			uni.setStorageSync('flag', '预约下单')
			getApp().globalData.gzbh = item.gzbh
			uni.switchTab({
				url: '/pages/kind'
			})
		},
		goHandle(item) {
			// let plugin = requirePlugin('routePlan');
			// // let key = key;  //使用在腾讯位置服务申请的key
			// let referer = '智能租赁柜'; //调用插件的app的名称
			let arr = item.manager.split(',')
			// let endPoint = JSON.stringify({ //终点
			// 	'name': item.address,
			// 	'latitude': arr[0],
			// 	'longitude': arr[1]
			// });
			// uni.navigateTo({
			// 	url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
			// })
			// console.log('endPoint', endPoint)
			// uni.navigateTo({
			//  url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
			// })
			let _this = this
			uni.openLocation({
				name: item.address,
				address: item.address,
				latitude: parseFloat(arr[0]),
				longitude: parseFloat(arr[1]),
				success: function () {
					console.log('success')
				},
				fail: function (err) {
					_this.$api.msg(err.errMsg)
				}
			})
		},
		getDataList() {
			this.$http
				.ajax({
					url: '/Cabinet/list',
					params: {
						lat: getApp().globalData.latitude,
						lng: getApp().globalData.longitude,
						itemsid: this.goodsId,
						address: this.searchInput,
						operatorid: uni.getStorageSync('merchantId')
					},
					isOP: 1
				})
				.then((res) => {
					console.log('res', res)
					if (res.code == 0) {
						if (res.data.length === 0) {
							this.dataList = []
							this.noLnglatList = []
							this.middleList = []
							return
						}
						if (this.isLocation) {
							this.middleList = []
							this.noLnglatList = []
							let arr = []
							res.data.forEach((item) => {
								if (item.manager == '未设置') {
									this.noLnglatList.push(item)
								} else {
									this.middleList.push(item)
									arr.push(item.manager)
								}
							})
							let str = arr.join(';')
							this.getDistance(str)
						} else {
							this.dataList = res.data
							this.$api.msg('请开启定位')
						}
					} else {
						this.$api.msg(res.msg)
					}
				})
		},
		getDistance(str) {
			let _this = this
			uni.request({
				url: 'https://apis.map.qq.com/ws/distance/v1',
				method: 'GET',
				data: {
					mode: 'walking',
					from: _this.lnglat,
					to: str,
					key: key
				},
				success: (res) => {
					this.isfetch = true
					if (res.data.status == 0) {
						let arr = res.data.result.elements
						this.middleList.forEach((item, index) => {
							var distance = arr[index].distance
							if (distance && distance !== -1) {
								item.distance = distance
							} else {
								item.distance = '在附近'
							}
						})
						this.middleList = this.middleList.sort(function (a, b) {
							if (a.distance > b.distance) {
								return 1
							} else if (a.distance < b.distance) {
								return -1
							} else {
								return 0
							}
						})
						this.dataList = this.middleList.concat(this.noLnglatList)
						console.log('dataList', this.dataList)
					}
				}
			})
		},
		getLocationText(type) {
			let _this = this
			uni.request({
				url: 'https://apis.map.qq.com/ws/geocoder/v1',
				method: 'GET',
				data: {
					location: _this.lnglat,
					key: key
				},
				success: (res) => {
					if (res.data.status == 0) {
						if (type == 1) {
							this.$api.msg('定位成功')
						}
						this.locationText = res.data.result.address
					} else {
						if (type == 1) {
							this.$api.msg('定位失败')
						}
						this.locationText = ''
					}
				}
			})
		},
		toText(distance) {
			if (distance < 1000) {
				return distance + 'm'
			} else {
				return (distance / 1000).toFixed(1) + 'km'
			}
		}
	}
}
</script>

<style scoped lang="scss">
.near-top {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	background-color: #ffffff;
	padding: 20rpx 30rpx;
	height: 244rpx;

	.input-box {
		width: 690rpx;
		height: 80rpx;
		background: #eeeeee;
		border-radius: 10rpx;
		padding: 0 30rpx;
	}
}

.near-bottom {
	padding: 244rpx 10rpx 0;
}

.item-box {
	padding: 40rpx;
	width: 690rpx;
	background: #ffffff;
	border-radius: 20rpx;
}

.lishi-stor {
	height: 60rpx;
	background: #ffffff;
	border-radius: 30rpx;
	padding: 0 30rpx;
	margin-top: 40rpx;
	margin-right: 30rpx;
}

.lishi-box {
	padding: 45rpx 20rpx 0;
}

.container {
	padding: 20rpx;
}

.shop-btn {
	width: 130rpx;
	height: 60rpx;
	background: linear-gradient(-90deg, #e7431e 0%, #ffb3ab 100%);
	border-radius: 30rpx;
}
</style>
